<template>
  <div class="app-container" :class="{ 'is-edit': isEdit }">
    <div v-loading="loading" v-if="page == 'RecordReport' && isOk || page != 'RecordReport'">
      <!-- 基本信息模块 -->
      <div class="section">
        <div class="el-row-flex">
          <div class="logo-section">
            <el-image class="logo-img" width="100%" height="100%"
              :src="require(`@/assets/images/${genderMap[info.gender] || '男'}.png`)" fit="contain" />
          </div>
          <div class="desc-section">
            <el-row class="el-row-flex center" :gutter="8">
              <el-col :span="isEdit ? 20 : 14">
                <div class="first-text">
                  <span class="form-item required" data-props="name">
                    <span class="form-label" style="width: 84px;font-weight: normal;font-size: 15px;color: #333333;"
                      v-if="isEdit">姓名：</span>
                    <span v-if="!isEdit">{{ info.name | getText }}</span>
                    <el-input v-model="editData.name" size="small" class="w-120 form-content" v-else
                      placeholder="请输入姓名" />
                  </span>
                  <span class="death-card" v-if="!isEdit">死亡卡</span>
                  <span class="form-item" data-props="cardNo" style="margin-left: 12px;">
                    <span class="form-label" style="width: 94px;font-weight: normal;font-size: 15px;color: #333333;"
                      v-if="isEdit">死亡卡编码：</span>
                    <span v-if="!isEdit">{{ info.cardNo | getText }}</span>
                    <el-input v-model="editData.cardNo" size="small" disabled class="w-200 form-content" v-else
                      placeholder="请输入死亡卡编码" />
                  </span>
                </div>
              </el-col>
              <el-col :span="isEdit ? 4 : 10" class="flex-right between">
                <div>
                  <el-button type="primary" :loading="eventLoading" size="small"
                    v-if="operatorMap[info.operate] && !isEdit" @click="handleEvent">{{ operatorMap[info.operate]
                    }}</el-button>
                  <el-button size="small" @click="dialogVisible = true" v-if="!isEdit && !reportPage">下载死亡证明</el-button>
                  <el-button size="small" @click="dialogOther = true" v-if="!isEdit && !reportPage">下载附件</el-button>
                  <el-button size="small" @click="doEdit" v-if="!isEdit" :disabled="!info.edit">编辑</el-button>
                  <div class="save-btns" v-else>
                    <el-button size="small" @click="doSave" :loading="editLoading" type="primary">保存</el-button>
                    <el-button size="small" @click="isEdit = false">取消</el-button>
                  </div>
                </div>
                <div>
                  <el-button size="small" class="go-back-btn" @click="goBack" v-if="!isEdit && !reportPage"
                    style="font-size: 14px;padding: 7px 15px"><el-image class="go-back-img"
                      :src="require(`@/assets/images/go-back.svg`)" />返回</el-button>
                </div>
              </el-col>
            </el-row>
            <el-row class="el-row-flex" :gutter="8">
              <el-col :span="isEdit ? 13 : 9">
                <div>
                  <span class="second-text form-item required" data-props="gender">
                    <span class="form-label" style="width: 84px;">患者性别：</span>
                    <span v-if="!isEdit">{{ genderMap[info.gender] | getText }}</span>
                    <el-select v-else class="w-120 form-content" v-model="editData.gender" filterable
                      placeholder="请选择性别" clearable>
                      <el-option v-for="item in genderOptions" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                  </span>
                </div>
                <div class="mt-12" style="display: flex;align-items: center;">
                  <span class="second-text form-item required" data-props="cardState">
                    <span class="form-label" style="width: 84px;">报卡类型：</span>
                    <span v-if="!isEdit">{{ cardStateMap[info.cardState] | getText }}</span>
                    <el-select v-else class="w-120 form-content" v-model="editData.cardState" filterable
                      placeholder="请选择报卡类型" clearable>
                      <el-option v-for="item in cardStateOptions" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                  </span>
                  <span style="margin-left: 12px;" class="second-text form-item" data-props="idcardType">
                    <span class="form-label" style="width: 94px;">证件类型：</span>
                    <span v-if="!isEdit">{{ idcardTypeMap[info.idcardType] | getText }}</span>
                    <el-select v-else class="w-200 form-content" v-model="editData.idcardType" filterable
                      placeholder="请选择证件类型" clearable>
                      <el-option v-for="item in idcardTypeOptions" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                  </span>
                </div>
              </el-col>
              <el-col :span="7" style="display: flex;flex-direction: column;">
                <div class="second-text form-item" data-props="serialNumber">
                  <span class="form-label" style="width: 94px;">就诊序列号：</span>
                  <span v-if="!isEdit">{{ info.serialNumber | getText }}</span>
                  <el-input v-model="editData.serialNumber" size="small" class="w-200 form-content" v-else
                    placeholder="请输入就诊序列号" />
                </div>
                <div class="second-text mt-12 form-item" data-props="idcardCode">
                  <span class="form-label" style="width: 94px;">证件号码：</span>
                  <span v-if="!isEdit">{{ info.idcardCode | getText }}</span>
                  <el-input v-model="editData.idcardCode" size="small" @input="handleIdcardCodeChange"
                    ref="idcardCodeInput" class="w-200 form-content" v-else placeholder="请输入证件号码" />
                </div>
              </el-col>
              <el-col :span="isEdit ? 4 : 8" class="flex-right virtual end">
                <div style="color: #999999;">状态</div>
                <div style="font-size: 20px; display: flex;align-items: center;">
                  <el-image class="status-img" :src="require(`@/assets/images/${getStatusImg(info.status)}.svg`)" />{{
                    statusTextMap[info.status] || '未知' }}
                </div>
              </el-col>

            </el-row>
          </div>
        </div>
      </div>
      <!-- 上报进度模块 -->
      <div class="section mt-8">
        <div class="first-text" style="margin-bottom: 20px;">上报进度</div>
        <div class="steps-wrapper">
          <el-steps :active="step" align-center finish-status="success" process-status="finish">
            <el-step :title="operatorMap[step.name] || '未知'" v-for="step in stepList" :key="step.name">
              <template #description>
                <template v-if="step.audit">
                  <span style="color: #999999;">{{ step.audit }}</span><br />
                </template>
                <span style="color: #999999;" v-if="step.time">{{ step.time }}</span>
              </template>
            </el-step>
          </el-steps>
        </div>
      </div>
      <!-- tabs模块 基本信息/报告信息 -->
      <div class="section mt-8">
        <!-- <el-tabs v-model="activeName" @tab-click="handleClick"> -->
        <!-- <el-tab-pane label="基本信息" name="first"> -->
        <!-- 患者基本信息 -->
        <el-row class="el-row-flex first-text" :gutter="0">患者基本信息</el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="nation">
            <span class="form-label">民族：</span>
            <span v-if="!isEdit">{{ nationMap[info.nation] | getText }}</span>
            <el-select v-else class="w-300 form-content" v-model="editData.nation" filterable placeholder="请选择民族"
              clearable>
              <el-option v-for="item in nationOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="country">
            <span class="form-label">国家或地区：</span>
            <span v-if="!isEdit">{{ countryMap[info.country] | getText }}</span>
            <el-select v-else class="w-300 form-content" v-model="editData.country" filterable placeholder="请选择国家或地区"
              clearable>
              <el-option v-for="item in countryOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="birthDate">
            <span class="form-label">出生日期：</span>
            <span v-if="!isEdit">{{ info.birthDate | getText }}</span>
            <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" v-model="editData.birthDate"
              size="small" class="w-300 form-content" v-else placeholder="请选择出生日期" />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="age">
            <span class="form-label">死亡年龄：</span>
            <span v-if="!isEdit">{{ info.age | getText }}</span>
            <el-input v-model="editData.age" size="small" class="w-300 form-content" v-else placeholder="请输入死亡年龄" />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="ageUnitCode">
            <span class="form-label">死亡年龄单位：</span>
            <span v-if="!isEdit">{{ ageUnitCodeMap[info.ageUnitCode] | getText }}</span>
            <el-select v-else class="w-300 form-content" v-model="editData.ageUnitCode" filterable
              placeholder="请选择死亡年龄单位" clearable>
              <el-option v-for="item in ageUnitCodeOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="maritalStatus">
            <span class="form-label">婚姻状态：</span>
            <span v-if="!isEdit">{{ maritalStatusMap[info.maritalStatus] | getText }}</span>
            <el-select v-else class="w-300 form-content" v-model="editData.maritalStatus" filterable
              placeholder="请选择婚姻状态" clearable>
              <el-option v-for="item in maritalStatusOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="educatoinLevel">
            <span class="form-label">文化程度：</span>
            <span v-if="!isEdit">{{ educatoinLevelMap[info.educatoinLevel] | getText }}</span>
            <el-select v-else class="w-300 form-content" v-model="editData.educatoinLevel" filterable
              placeholder="请选择文化程度" clearable>
              <el-option v-for="item in educatoinLevelOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="codrisOccupation">
            <span class="form-label">个人身份：</span>
            <span v-if="!isEdit">{{ codrisOccupationMap[info.codrisOccupation] | getText }}</span>
            <el-select v-else class="w-300 form-content" v-model="editData.codrisOccupation" filterable
              placeholder="请选择个人身份" clearable>
              <el-option v-for="item in codrisOccupationOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="deathDate">
            <span class="form-label">死亡日期：</span>
            <span v-if="!isEdit">{{ info.deathDate | getText }}</span>
            <el-date-picker format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" type="datetime"
              v-model="editData.deathDate" size="small" class="w-300 form-content" v-else placeholder="请选择死亡日期" />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="deathplaceCode">
            <span class="form-label">死亡地点类别：</span>
            <span v-if="!isEdit">{{ deathplaceCodeMap[info.deathplaceCode] | getText }}</span>
            <el-select v-else class="w-300 form-content" v-model="editData.deathplaceCode" filterable
              placeholder="请选择死亡地点类别" clearable>
              <el-option v-for="item in deathplaceCodeOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="isPre">
            <span class="form-label">是否处于妊娠期或妊娠终止后42天内：</span>
            <span v-if="!isEdit">{{ trueFalseMap[info.isPre] | getText }}</span>
            <el-radio-group v-model="editData.isPre" size="small" class="w-300 form-content"
              style="height: 34px;justify-content: flex-start;" v-else>
              <el-radio :label="item.value" v-for="(item, index) in trueFalseOptions" :key="index">{{ item.label
              }}</el-radio>
            </el-radio-group>
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item" data-props="employerOrg">
            <span class="form-label">工作单位：</span>
            <span v-if="!isEdit">{{ info.employerOrg | getText }}</span>
            <el-input v-model="editData.employerOrg" size="small" class="w-300 form-content" v-else
              placeholder="请输入工作单位" />
          </div>
        </el-row>

        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="domicileType">
            <span class="form-label">户籍地址类型：</span>
            <span v-if="!isEdit">{{ domicileTypeMap[info.domicileType] | getText }}</span>
            <el-select v-else class="w-300 form-content" v-model="editData.domicileType" filterable
              placeholder="请选择地址类型" clearable>
              <el-option v-for="item in domicileTypeOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="domicileRegionInfo">
            <span class="form-label">户籍地址选择：</span>
            <span v-if="!isEdit">{{ domicileRegionInfo.provinceName | getText }}{{ domicileRegionInfo.cityName |
              getText }}{{ domicileRegionInfo.countyName | getText
              }}{{ domicileRegionInfo.townsName | getText }}{{ domicileRegionInfo.villageName | getText
              }}</span>
            <AddressSelect v-else v-model="domicileRegionInfo" />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="domicileDetail">
            <span class="form-label">户籍详细地址：</span>
            <span v-if="!isEdit">{{ info.domicileDetail | getText }}</span>
            <el-input v-else class="w-500 form-content" v-model="editData.domicileDetail" placeholder="请输入户籍详细地址"
              clearable />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="domicileCode">
            <span class="form-label">户籍地址编码：</span>
            <span v-if="!isEdit">{{ info.domicileCode | getText }}</span>
            <el-input v-else class="w-300 form-content" v-model="editData.domicileCode" placeholder="请输入户籍编码"
              clearable />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item" data-props="domicileVallage">
            <span class="form-label">户籍地村编码：</span>
            <span v-if="!isEdit">{{ info.domicileVallage | getText }}</span>
            <el-input v-else class="w-300 form-content" v-model="editData.domicileVallage" placeholder="请输入户籍村编码"
              clearable />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="obodeType">
            <span class="form-label">常住地类型：</span>
            <span v-if="!isEdit">{{ obodeTypeMap[info.obodeType] | getText }}</span>
            <el-select v-else class="w-300 form-content" v-model="editData.obodeType" filterable placeholder="请选择常住地类型"
              clearable>
              <el-option v-for="item in obodeTypeOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="form-item" v-if="isEdit" style="margin-left: 20px;">
            <el-button type="text" @click="copyAddress">一键复制户籍地址到常住地址</el-button>
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="obodeRegionInfo">
            <span class="form-label">常住地址选择：</span>
            <span v-if="!isEdit">{{ obodeRegionInfo.provinceName | getText }}{{ obodeRegionInfo.cityName |
              getText }}{{ obodeRegionInfo.countyName | getText
              }}{{ obodeRegionInfo.townsName | getText }}{{ obodeRegionInfo.villageName | getText
              }}</span>
            <AddressSelect ref="addressSelect" v-else v-model="obodeRegionInfo" />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="obodeDetail">
            <span class="form-label">常住地详细地址：</span>
            <span v-if="!isEdit">{{ info.obodeDetail | getText }}</span>
            <el-input v-else class="w-500 form-content" v-model="editData.obodeDetail" placeholder="请输入常住地详细地址"
              clearable />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="obodeCode">
            <span class="form-label">常住地址编码：</span>
            <span v-if="!isEdit">{{ info.obodeCode | getText }}</span>
            <el-input v-else class="w-300 form-content" v-model="editData.obodeCode" placeholder="请输入常住地编码" clearable />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item" data-props="obodeVallage">
            <span class="form-label">常住地村编码：</span>
            <span v-if="!isEdit">{{ info.obodeVallage | getText }}</span>
            <el-input v-else class="w-300 form-content" v-model="editData.obodeVallage" placeholder="请输入常住地村编码"
              clearable />
          </div>
        </el-row>

        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="guardianName">
            <span class="form-label">可联系家属姓名：</span>
            <span v-if="!isEdit">{{ info.guardianName | getText }}</span>
            <el-input v-model="editData.guardianName" size="small" class="w-300 form-content" v-else
              placeholder="请输入可联系家属姓名" />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="guardianTel">
            <span class="form-label">家属联系电话：</span>
            <span v-if="!isEdit">{{ info.guardianTel | getText }}</span>
            <el-input v-model="editData.guardianTel" size="small" class="w-300 form-content" v-else
              placeholder="请输入家属联系电话" />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="guardianIdcardType">
            <span class="form-label">家属证类型：</span>
            <span v-if="!isEdit">{{ guardianIdcardTypeMap[info.guardianIdcardType] | getText }}</span>
            <el-select v-else class="w-300 form-content" v-model="editData.guardianIdcardType" filterable
              placeholder="请选择家属证类型" clearable>
              <el-option v-for="item in guardianIdcardTypeOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="guardianIdcardCode">
            <span class="form-label">家属证号码：</span>
            <span v-if="!isEdit">{{ info.guardianIdcardCode | getText }}</span>
            <el-input v-model="editData.guardianIdcardCode" size="small" class="w-300 form-content" v-else
              placeholder="请输入家属证号码" />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="guardianAddress">
            <span class="form-label">家属住址或单位：</span>
            <span v-if="!isEdit">{{ info.guardianAddress | getText }}</span>
            <el-input v-model="editData.guardianAddress" size="small" class="w-300 form-content" v-else
              placeholder="请输入家属住址或单位" />
          </div>
        </el-row>
        <!-- </el-tab-pane> -->
        <!-- <el-tab-pane label="报告信息" name="second"> -->

        <!-- 直接导致死亡的基本或情况 -->
        <el-row class="el-row-flex first-text mt-24" :gutter="0">直接导致死亡的基本或情况</el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="causeA">
            <span class="form-label">导致死亡的疾病A：</span>
            <span v-if="!isEdit">{{ info.causeA | getText }}</span>
            <IdcInput v-else v-model="editData.causeA" @update:value="(code) => { editData.causeIcd10A = code }" />
          </div>
          <div class="form-item w-2" data-props="intervalTimeA">
            <span class="form-label">发病至死亡时间间隔：</span>
            <span v-if="!isEdit">{{ info.intervalTimeA | getText }}</span>
            <el-input-number v-model="editData.intervalTimeA" size="small" class="w-150 form-content" v-else
              placeholder="请输入" :min="0" :max="999" :precision="1" :step="1" />
          </div>
          <div class="form-item" style="margin-left: 8px;" data-props="intervalUnitcodeA">
            <!-- <span class="form-label">间隔时间类型：</span> -->
            <span v-if="!isEdit">{{ intervalUnitcodeAMap[info.intervalUnitcodeA] | getText }}</span>
            <el-select v-else class="w-100 form-content" v-model="editData.intervalUnitcodeA" filterable
              placeholder="请选择" clearable>
              <el-option v-for="item in intervalUnitcodeAOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="causeIcd10A">
            <span class="form-label">疾病A的icd10编码：</span>
            <span v-if="!isEdit">{{ info.causeIcd10A | getText }}</span>
            <IdcInput v-else v-model="editData.causeIcd10A" @update:label="(label) => { editData.causeA = label }"
              inputField="value" placeholder="请输入编码搜索" />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item" data-props="causeB">
            <span class="form-label">导致死亡的疾病B：</span>
            <span v-if="!isEdit">{{ info.causeB | getText }}</span>
            <IdcInput v-else v-model="editData.causeB" @update:value="(code) => { editData.causeIcd10B = code }" />
          </div>
          <div class="form-item w-2" data-props="intervalTimeB">
            <span class="form-label">发病至死亡时间间隔：</span>
            <span v-if="!isEdit">{{ info.intervalTimeB | getText }}</span>
            <el-input-number v-model="editData.intervalTimeB" size="small" class="w-150 form-content" v-else
              placeholder="请输入" :min="0" :max="999" :precision="1" :step="1" />
          </div>
          <div class="form-item" style="margin-left: 8px;" data-props="intervalUnitcodeB">
            <!-- <span class="form-label">间隔时间类型：</span> -->
            <span v-if="!isEdit">{{ intervalUnitcodeBMap[info.intervalUnitcodeB] | getText }}</span>
            <el-select v-else class="w-100 form-content" v-model="editData.intervalUnitcodeB" filterable
              placeholder="请选择" clearable>
              <el-option v-for="item in intervalUnitcodeBOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item" data-props="causeIcd10B">
            <span class="form-label">疾病B的icd10编码：</span>
            <span v-if="!isEdit">{{ info.causeIcd10B | getText }}</span>
            <IdcInput v-else v-model="editData.causeIcd10B" @update:label="(label) => { editData.causeB = label }"
              inputField="value" placeholder="请输入编码搜索" />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item" data-props="causeC">
            <span class="form-label">导致死亡的疾病C：</span>
            <span v-if="!isEdit">{{ info.causeC | getText }}</span>
            <IdcInput v-else v-model="editData.causeC" @update:value="(code) => { editData.causeIcd10C = code }" />
          </div>
          <div class="form-item w-2" data-props="intervalTimeC">
            <span class="form-label">发病至死亡时间间隔：</span>
            <span v-if="!isEdit">{{ info.intervalTimeC | getText }}</span>
            <el-input-number v-model="editData.intervalTimeC" size="small" class="w-150 form-content" v-else
              placeholder="请输入" :min="0" :max="999" :precision="1" :step="1" />
          </div>
          <div class="form-item" style="margin-left: 8px;" data-props="intervalUnitcodeC">
            <!-- <span class="form-label">间隔时间类型：</span> -->
            <span v-if="!isEdit">{{ intervalUnitcodeCMap[info.intervalUnitcodeC] | getText }}</span>
            <el-select v-else class="w-100 form-content" v-model="editData.intervalUnitcodeC" filterable
              placeholder="请选择" clearable>
              <el-option v-for="item in intervalUnitcodeCOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item" data-props="causeIcd10C">
            <span class="form-label">疾病C的icd10编码：</span>
            <span v-if="!isEdit">{{ info.causeIcd10C | getText }}</span>
            <IdcInput v-else v-model="editData.causeIcd10C" @update:label="(label) => { editData.causeC = label }"
              inputField="value" placeholder="请输入编码搜索" />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item" data-props="causeD">
            <span class="form-label">导致死亡的疾病D：</span>
            <span v-if="!isEdit">{{ info.causeD | getText }}</span>
            <IdcInput v-else v-model="editData.causeD" @update:value="(code) => { editData.causeIcd10D = code }" />
          </div>
          <div class="form-item w-2" data-props="intervalTimeD">
            <span class="form-label">发病至死亡时间间隔：</span>
            <span v-if="!isEdit">{{ info.intervalTimeD | getText }}</span>
            <el-input-number v-model="editData.intervalTimeD" size="small" class="w-150 form-content" v-else
              placeholder="请输入" :min="0" :max="999" :precision="1" :step="1" />
          </div>
          <div class="form-item" style="margin-left: 8px;" data-props="intervalUnitcodeD">
            <!-- <span class="form-label">间隔时间类型：</span> -->
            <span v-if="!isEdit">{{ intervalUnitcodeDMap[info.intervalUnitcodeD] | getText }}</span>
            <el-select v-else class="w-100 form-content" v-model="editData.intervalUnitcodeD" filterable
              placeholder="请选择" clearable>
              <el-option v-for="item in intervalUnitcodeDOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item" data-props="causeIcd10D">
            <span class="form-label">疾病D的icd10编码：</span>
            <span v-if="!isEdit">{{ info.causeIcd10D | getText }}</span>
            <IdcInput v-else v-model="editData.causeIcd10D" @update:label="(label) => { editData.causeD = label }"
              inputField="value" placeholder="请输入编码搜索" />
          </div>
        </el-row>

        <!-- 直接导致死亡的其他疾病诊断 -->
        <el-row class="el-row-flex first-text mt-24" :gutter="0">直接导致死亡的其他疾病诊断</el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item" data-props="icdnameOther">
            <span class="form-label">其他病因icd10名称：</span>
            <span v-if="!isEdit">{{ info.icdnameOther | getText }}</span>
            <IdcInput v-else v-model="editData.icdnameOther"
              @update:value="(code) => { editData.icdcodeOther = code }" />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item" data-props="icdcodeOther">
            <span class="form-label">其他病因icd10编码：</span>
            <span v-if="!isEdit">{{ info.icdcodeOther | getText }}</span>
            <IdcInput v-else v-model="editData.icdcodeOther"
              @update:label="(label) => { editData.icdnameOther = label }" inputField="value" placeholder="请输入编码搜索" />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item" data-props="causeOther">
            <span class="form-label">其他疾病原因：</span>
            <span v-if="!isEdit">{{ info.causeOther | getText }}</span>
            <IdcInput v-else v-model="editData.causeOther" />
          </div>
        </el-row>

        <!-- 根本死亡原因 -->
        <el-row class="el-row-flex first-text mt-24" :gutter="0">根本死亡原因</el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="basicCauseDesc">
            <span class="form-label">死亡原因描述：</span>
            <span v-if="!isEdit">{{ info.basicCauseDesc | getText }}</span>
            <IdcInput v-else v-model="editData.basicCauseDesc"
              @update:value="(code) => { editData.basicIcd10 = code }" />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="basicIcd10">
            <span class="form-label">死亡原因icd10编码：</span>
            <span v-if="!isEdit">{{ info.basicIcd10 | getText }}</span>
            <IdcInput v-else v-model="editData.basicIcd10"
              @update:label="(label) => { editData.basicCauseDesc = label }" inputField="value" placeholder="请输入编码搜索" />
          </div>
        </el-row>

        <!-- 诊断信息 -->
        <el-row class="el-row-flex first-text mt-24" :gutter="0">诊断信息</el-row>
        <!-- <el-row class="el-row-flex second-text" :gutter="8">
              <el-col :span="13" class="form-item required" data-props="orgCode">
                <span class="form-label">报告单位编码：</span>
                <span v-if="!isEdit">{{ info.orgCode | getText }}</span>
                <el-input v-model="editData.orgCode" size="small" class="w-300 form-content" v-else
                  placeholder="请输入报告单位编码" /></el-col>
                <el-col :span="13" class="form-item required" data-props="createMan">
                <span class="form-label">录入人：</span>
                <span v-if="!isEdit">{{ info.createMan | getText }}</span>
                <el-input v-model="editData.createMan" size="small" class="w-300 form-content" v-else
                  placeholder="请输入录入人" /></el-col>
            </el-row> -->
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="diagnosticUnitCode">
            <span class="form-label">最高诊断单位：</span>
            <span v-if="!isEdit">{{ diagnosticUnitCodeMap[info.diagnosticUnitCode] | getText }}</span>
            <el-select v-else class="w-300 form-content" v-model="editData.diagnosticUnitCode" filterable
              placeholder="请选择最高诊断单位" clearable>
              <el-option v-for="item in diagnosticUnitCodeOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="diagnosticBasisCode">
            <span class="form-label">最高诊断依据：</span>
            <span v-if="!isEdit">{{ diagnosticBasisCodeMap[info.diagnosticBasisCode] | getText }}</span>
            <el-select v-else class="w-300 form-content" v-model="editData.diagnosticBasisCode" filterable
              placeholder="请选择最高诊断依据" clearable>
              <el-option v-for="item in diagnosticBasisCodeOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="doctorName">
            <span class="form-label">填卡医师：</span>
            <span v-if="!isEdit">{{ info.doctorName | getText }}</span>
            <el-input v-model="editData.doctorName" size="small" class="w-300 form-content" v-else
              placeholder="请输入填卡医师" />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="fillCardDate">
            <span class="form-label">填卡日期：</span>
            <span v-if="!isEdit">{{ info.fillCardDate | getText }}</span>
            <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" v-model="editData.fillCardDate"
              size="small" class="w-300 form-content" v-else placeholder="请选择填卡日期" />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="createOrgCode">
            <span class="form-label">录入单位编码：</span>
            <span v-if="!isEdit">{{ info.createOrgCode | getText }}</span>
            <el-input v-model="editData.createOrgCode" size="small" class="w-300 form-content" v-else
              placeholder="请输入录入单位编码" />
          </div>
        </el-row>
        <el-row class="el-row-flex second-text justify-center" :gutter="8">
          <div class="form-item required" data-props="createDate">
            <span class="form-label">录入日期：</span>
            <span v-if="!isEdit">{{ info.createDate | getText }}</span>
            <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" v-model="editData.createDate"
              size="small" class="w-300 form-content" v-else placeholder="请选择录入日期" />
          </div>
        </el-row>

        <!-- 调查记录 -->
        <el-row class="el-row-flex first-text mt-24" :gutter="0">调查记录
          <el-button style="margin-left: 20px;" size="mini" @click="openSurvey = !openSurvey">{{ openSurvey ? '关闭' :
            '打开'
          }}</el-button>
        </el-row>
        <template v-if="openSurvey">

          <el-row class="el-row-flex second-text justify-center" :gutter="8">
            <div class="form-item" data-props="historyDisease">
              <span class="form-label">死者生前病史及症状体征：</span>
              <span v-if="!isEdit">{{ info.historyDisease | getText }}</span>
              <el-input v-model="editData.historyDisease" size="small" class="w-300 form-content" v-else
                placeholder="请输入死者生前病史及症状体征" />
            </div>
          </el-row>
          <el-row class="el-row-flex second-text justify-center" :gutter="8">
            <div class="form-item" data-props="respName">
              <span class="form-label">被调查者姓名：</span>
              <span v-if="!isEdit">{{ info.respName | getText }}</span>
              <el-input v-model="editData.respName" size="small" class="w-300 form-content" v-else
                placeholder="请输入被调查者姓名" />
            </div>
          </el-row>
          <el-row class="el-row-flex second-text justify-center" :gutter="8">
            <div class="form-item" data-props="respRelation">
              <span class="form-label">与死者关系：</span>
              <span v-if="!isEdit">{{ info.respRelation | getText }}</span>
              <el-input v-model="editData.respRelation" size="small" class="w-300 form-content" v-else
                placeholder="请输入与死者关系" />
            </div>
          </el-row>
          <el-row class="el-row-flex second-text justify-center" :gutter="8">
            <div class="form-item" data-props="respAddr">
              <span class="form-label">联系地址或工作单位：</span>
              <span v-if="!isEdit">{{ info.respAddr | getText }}</span>
              <el-input v-model="editData.respAddr" size="small" class="w-300 form-content" v-else
                placeholder="请输入联系地址或工作单位" />
            </div>
          </el-row>
          <el-row class="el-row-flex second-text justify-center" :gutter="8">
            <div class="form-item" data-props="respTel">
              <span class="form-label">被调查者电话号码：</span>
              <span v-if="!isEdit">{{ info.respTel | getText }}</span>
              <el-input v-model="editData.respTel" size="small" class="w-300 form-content" v-else
                placeholder="请输入被调查者电话号码" />
            </div>
          </el-row>
          <el-row class="el-row-flex second-text justify-center" :gutter="8">
            <div class="form-item" data-props="verbalAutopsy">
              <span class="form-label">死因推断：</span>
              <span v-if="!isEdit">{{ info.verbalAutopsy | getText }}</span>
              <el-input v-model="editData.verbalAutopsy" size="small" class="w-300 form-content" v-else
                placeholder="请输入死因推断" />
            </div>
          </el-row>
          <!-- <el-row class="el-row-flex second-text justify-center" :gutter="8">
              <div class="form-item" data-props="surveyMan">
                <span class="form-label">调查者签名：</span>
                <span v-if="!isEdit">{{ info.surveyMan | getText }}</span>
                <el-input v-model="editData.surveyMan" size="small" class="w-300 form-content" v-else
                  placeholder="请输入调查者签名" />
              </div>
            </el-row> -->
          <el-row class="el-row-flex second-text justify-center" :gutter="8">
            <div class="form-item" data-props="surveyDate">
              <span class="form-label">调查日期：</span>
              <span v-if="!isEdit">{{ info.surveyDate | getText }}</span>
              <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" v-model="editData.surveyDate"
                size="small" class="w-300 form-content" v-else placeholder="请选择调查日期" />
            </div>
          </el-row>
        </template>

        <!-- </el-tab-pane> -->
        <!-- </el-tabs> -->
      </div>
    </div>

    <DeathCertificate v-model="dialogVisible" :info="info" />
    <OtherCertificate v-model="dialogOther" :info="info" />
  </div>
</template>

<script>
import { doEvent, getDetailById, getDetailByPatientId, saveDetail } from '@/api/record';
import AddressInput from '@/components/AddressInput';
import AddressSelect from '@/components/AddressSelect';
import IdcInput from '@/components/IdcInput';
import { getExactType, sleep } from '@/utils';
import { ageUnitCodeMap, ageUnitCodeOptions, cardStateMap, cardStateOptions, codrisOccupationMap, codrisOccupationOptions, countryMap, countryOptions, deathplaceCodeMap, deathplaceCodeOptions, diagnosticBasisCodeMap, diagnosticBasisCodeOptions, diagnosticUnitCodeMap, diagnosticUnitCodeOptions, domicileTypeMap, domicileTypeOptions, educatoinLevelMap, educatoinLevelOptions, genderMap, genderOptions, guardianIdcardTypeMap, guardianIdcardTypeOptions, idcardTypeMap, idcardTypeOptions, intervalUnitcodeAMap, intervalUnitcodeAOptions, intervalUnitcodeBMap, intervalUnitcodeBOptions, intervalUnitcodeCMap, intervalUnitcodeCOptions, intervalUnitcodeDMap, intervalUnitcodeDOptions, maritalStatusMap, maritalStatusOptions, nationMap, nationOptions, obodeTypeMap, obodeTypeOptions, operatorMap, statusImgMap as statusMap, statusMap as statusTextMap, trueFalseMap, trueFalseOptions } from '@/utils/enum';
import { isEmpty, isFunction } from 'lodash';
import DeathCertificate from './deathCertificate';
import OtherCertificate from './otherCertificate';


export default {
  name: "EditCardInfo",
  components: {
    DeathCertificate,
    OtherCertificate,
    AddressInput,
    IdcInput,
    AddressSelect
  },
  props: {
    page: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      openSurvey: false,
      queryParams: {},
      loading: false,
      eventLoading: false,
      statusTextMap,
      info: {},
      editData: {},
      operatorMap,
      activeName: "first",
      dialogVisible: false,
      dialogOther: false,
      isEdit: false,
      editLoading: false,
      addressCodeList: [],
      icdCodeList: [],
      isOk: false,
      trueFalseOptions: trueFalseOptions(),
      trueFalseMap,
      deathplaceCodeOptions: deathplaceCodeOptions(),
      deathplaceCodeMap,
      cardStateOptions: cardStateOptions(),
      cardStateMap,
      intervalUnitcodeAOptions: intervalUnitcodeAOptions(),
      intervalUnitcodeAMap,
      intervalUnitcodeBOptions: intervalUnitcodeBOptions(),
      intervalUnitcodeBMap,
      intervalUnitcodeCOptions: intervalUnitcodeCOptions(),
      intervalUnitcodeCMap,
      intervalUnitcodeDOptions: intervalUnitcodeDOptions(),
      intervalUnitcodeDMap,
      diagnosticBasisCodeOptions: diagnosticBasisCodeOptions(),
      diagnosticBasisCodeMap,
      diagnosticUnitCodeOptions: diagnosticUnitCodeOptions(),
      diagnosticUnitCodeMap,
      obodeTypeOptions: obodeTypeOptions(),
      obodeTypeMap,
      domicileTypeOptions: domicileTypeOptions(),
      domicileTypeMap,
      ageUnitCodeOptions: ageUnitCodeOptions(),
      ageUnitCodeMap,
      genderOptions: genderOptions(),
      genderMap,
      guardianIdcardTypeOptions: guardianIdcardTypeOptions(),
      guardianIdcardTypeMap,
      idcardTypeOptions: idcardTypeOptions(),
      idcardTypeMap,
      nationOptions: nationOptions(),
      nationMap,
      maritalStatusOptions: maritalStatusOptions(),
      maritalStatusMap,
      codrisOccupationOptions: codrisOccupationOptions(),
      codrisOccupationMap,
      countryOptions: countryOptions(),
      countryMap,
      educatoinLevelOptions: educatoinLevelOptions(),
      educatoinLevelMap,
    };
  },
  filters: {
    getText(value) {
      let type = getExactType(value);
      return ['null', 'undefined'].includes(type) ? '-' : value;
    },
  },
  computed: {
    // report页面禁用下载按钮和返回按钮
    reportPage() {
      return this.page === 'RecordReport';
    },
    step() {
      return this.stepList.findIndex(item => item.active);
    },
    stepList() {
      return this.info.stepList || [];
    },
    showDomicileDetailSearch() {
      return !!this.editData.domicileDetail
    },
    domicileRegionInfo: {
      set(val = {}) {
        this.editData.domicileRegionInfo = val;
        this.editData.domicileDetail = `${val.provinceName}${val.cityName}${val.countyName}${val.townsName}${val.villageName}`;
        this.editData.domicileCode = val.townsCode;
        this.editData.domicileVallage = val.villageCode
      },
      get() {
        return this.editData.domicileRegionInfo || this.info.domicileRegionInfo || {};
      }
    },
    obodeRegionInfo: {
      set(val = {}) {
        this.editData.obodeRegionInfo = val;
        this.editData.obodeDetail = `${val.provinceName}${val.cityName}${val.countyName}${val.townsName}${val.villageName}`;
        this.editData.obodeCode = val.townsCode;
        this.editData.obodeVallage = val.villageCode
      },
      get() {
        return this.editData.obodeRegionInfo || this.info.obodeRegionInfo || {};
      }
    }
  },
  created() {
    if (this.reportPage) {
      // this.searchInfo()
    } else {
      this.getInfo()
    }
  },
  methods: {
    async handleIdcardCodeChange(val) {
      this.checkIdCardCode({
        val,
        fn: () => {
          const birth = val.slice(6, 14)
          this.editData.birthDate = birth.slice(0, 4) + '-' + birth.slice(4, 6) + '-' + birth.slice(6)
        }
      })
    },
    checkIdCardCode({ val, fn, tipError }) {
      const _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      const _IDre15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
      let pass = false;

      // 死亡卡&身份证类型需要校验并自动填充出生日期
      if (this.editData.cardState == '0' && this.editData.idcardType == '01') {
        if (_IDRe18.test(val) || _IDre15.test(val)) {
          pass = true
          if (isFunction(fn)) {
            fn()
          }
        }
        if (tipError && !pass) {
          this.$notify.error({
            // title: '错误',
            message: '请输入正确的身份证号码'
          });

        }
      } else {
        pass = true
      }

      if (pass) {
        this.$refs.idcardCodeInput.$el.classList.remove('error')
      } else {
        this.$refs.idcardCodeInput.$el.classList.add('error')
      }

      return pass;
    },
    async copyAddress() {
      this.editData.obodeType = this.editData.domicileType;
      this.editData.obodeDetail = this.editData.domicileDetail;
      this.editData.obodeCode = this.editData.domicileCode;
      this.editData.obodeVallage = this.editData.domicileVallage;
      this.editData.obodeRegionInfo = this.editData.domicileRegionInfo;
      await sleep()
      this.$refs.addressSelect.init()
    },
    doEdit() {
      Object.keys(this.info).forEach(key => {
        this.$set(this.editData, key, this.info[key])
      })
      if (this.reportPage) {
        this.$set(this.editData, 'patientId', this.queryParams.patientId)
      }
      this.isEdit = true;
    },
    checkValue(props) {
      if (getExactType(this.editData[props]) === 'string') {
        return !!this.editData[props]
      } else if (getExactType(this.editData[props]) === 'number') {
        return true;
      } else if (getExactType(this.editData[props]) === 'object') {
        return this.isFullObject(this.editData[props])
      } else {
        console.error(`${props}字段校验不通过， 值类型：${getExactType(this.editData[props])}`)
        return false;
      }
    },
    isFullObject(obj) {
      let flag = true;
      // let fields = ['provinceCode', 'cityCode', 'countyCode', 'townsCode', 'villageCode']
      let fields = ['provinceCode', 'cityCode', 'countyCode', 'townsCode']
      Object.keys(obj).forEach(key => {
        if (fields.includes(key)) {
          flag = flag && !isEmpty(obj[key])
        }
      })

      return flag;
    },
    checkForm() {
      let pass = this.checkIdCardCode({ val: this.editData.idcardCode, tipError: true });

      const nodeList = document.querySelectorAll('.form-item.required');
      // let pass = true;

      for (let i = 0; i < nodeList.length; i++) {
        const item = nodeList[i];
        const { props } = item.dataset;
        const formContent = item.querySelector('.form-content');
        // 如果证件类型校验不通过，则直接返回错误
        if (props == 'idcardCode' && formContent.classList.contains('error')) {
          return false;
        }
        formContent.classList.remove('error');
      }

      for (let i = 0; i < nodeList.length; i++) {
        const item = nodeList[i];
        const { props } = item.dataset;
        const formContent = item.querySelectorAll('.form-content');
        if (!this.checkValue(props)) {
          for (let k = 0; k < formContent.length; k++) {
            formContent[k].classList.add('error');
          }
          pass = false;
        }
      }

      return pass;
    },
    async doSave() {
      try {
        if (!this.checkForm()) {
          return this.$message.warning('请填写必填项')
        }
        this.editLoading = true;
        await saveDetail(this.editData)
        this.$message.success('编辑成功')
        this.editLoading = false;
        this.isEdit = false;
        if (this.reportPage) {
          this.searchInfo()
        } else {
          this.getInfo();
        }
      } catch (error) {
        console.error("🚀 ~ doSave ~ error:", error)
        this.editLoading = false
      }
    },
    getStatusImg(value) {
      return statusMap[value] || 'grey-loading';
    },
    handleClick() { },
    async handleEvent() {
      try {
        this.eventLoading = true
        let body = {
          serialNumber: this.info.serialNumber,
          operate: this.info.operate,
          patientId: this.info.patientId,
          id: this.info.id,
          cardNo: this.info.cardNo,
          idCard: this.info.idCard
        };

        await doEvent(body)
        this.eventLoading = false
        this.$message.success(operatorMap[this.info.operate] + '成功')
        if (this.reportPage) {
          this.searchInfo()
        } else {
          this.getInfo();
        }
      } catch (error) {
        this.eventLoading = false
      }
    },
    async getInfo() {
      try {
        this.loading = true;
        const query = { ...this.$route.query }
        delete query.from;
        const { data } = await getDetailById(query)
        this.loading = false;
        Object.keys(data).forEach(key => {
          this.$set(this.info, key, data[key])
        })
      } catch (error) {
        this.loading = false;
      }
    },
    async searchInfo({ queryParams = this.queryParams, edit = false } = {}) {
      try {
        this.queryParams = queryParams;
        this.loading = true;
        this.isOk = false;
        const { data } = await getDetailByPatientId(this.queryParams)
        this.isOk = true;
        this.loading = false;
        Object.keys(data).forEach(key => {
          this.$set(this.info, key, data[key])
        })
        if (edit) {
          this.doEdit()
        }
        // this.$forceUpdate();
      } catch (error) {
        this.loading = false;
        this.isOk = false;
      }
    },
    syncData(data) {
      for (let k in data) {
        this[k] = data[k]
      }
    },
    goBack() {
      this.$router.push({ path: this.$route.query.from || '/record' })
    },
  },
};

</script>

<style lang="scss" scoped>
.app-container {

  .form-item {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    &.w-1 {
      .form-label {
        width: 120px;
      }
    }

    &.w-2 {
      .form-label {
        width: 180px;
      }
    }

    &.w-3 {
      .form-label {
        width: 120px;
      }
    }

    .form-label {
      position: relative;
      width: 184px;
      display: inline-flex;
      justify-content: flex-end;
      word-break: break-all;
    }

    .form-content {
      // height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;

      &.error {
        border: 1px solid red;
        border-radius: 4px;
      }
    }

    &.required {
      .form-label {

        &::before {
          content: "*";
          color: red;
          position: relative;
          left: 0;
          top: 5px;
        }
      }
    }
  }


  background-color: #ECF1FB;
  min-height: calc(100vh - 50px);

  .go-back-btn:hover {
    color: #606266;
    opacity: 0.7;

    .go-back-img {
      opacity: 0.7;
    }
  }

  .steps-wrapper &::v-deep {
    .el-step__description {
      font-size: 14px;
    }
  }

  .logo-section {
    display: flex;
    width: 100px;
    margin-right: 12px;
  }

  .desc-section {
    flex: 1;
  }

  .w-60 {
    width: 60px;
  }

  .w-80 {
    width: 80px;

    // &::v-deep {
    //   .el-input__inner {
    //     padding: 0 4px;
    //   }
    // }
  }

  .w-100 {
    width: 100px;
  }

  .w-120 {
    width: 120px;
  }

  .w-150 {
    width: 150px;
  }

  .w-200 {
    width: 200px;
  }

  .w-300 {
    width: 300px;
  }

  .w-400 {
    width: 400px;
  }

  .w-500 {
    width: 500px;
  }

  .status-img,
  .go-back-img {
    margin-right: 4px;
    height: 14px;
    width: 14px;
    position: relative;
    top: 1px;
  }

  .flex-right {
    display: flex;
    justify-content: flex-end;

    &.between {
      justify-content: space-between;
    }

    &.virtual {
      flex-direction: column;
    }

    &.end {
      align-items: flex-end;
    }
  }

  .mt-24 {
    margin-top: 24px !important;
  }

  .mt-12 {
    margin-top: 12px !important;
  }


  .mt-32 {
    margin-top: 32px !important;
  }

  .section {
    padding: 20px;
    background-color: #ffffff;

    &.mt-8 {
      margin-top: 8px;
    }
  }

  .logo-img {
    width: 100%;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 4px;
  }

  .death-card {
    border-radius: 4px;
    padding: 0px 8px;
    font-size: 12px;
    display: inline-flex;
    color: #ffffff;
    background-color: #8CC8FF;
    margin-left: 32px;
  }


  .el-row-flex {

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    &.justify-center {
      padding-left: 15%;
    }

    &.high-line {
      // background-color: #DEEFFF;
    }

    &.center {
      align-items: center;
    }

    &.end {
      align-items: flex-end;
    }

    &.column-flex {
      flex-direction: column;
    }

    .chart-type {
      align-items: flex-start;
      display: flex;
      justify-content: flex-start;
      width: 100%;

    }

    &:not(:first-child) {
      margin-top: 12px;
    }
  }

  .main-text {
    font-weight: 700;
    font-size: 18px;
  }

  .first-text {
    font-weight: 700;
    font-size: 16px;
    // height: 22px;
    // line-height: 22px;
  }

  .second-text {
    font-size: 15px;
    color: #333333;
    // margin-top: 12px;
  }

  .save-btns {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 2;
  }
}
</style>
